<template>
  <div class="p-4 bs-bb">
    <div class="item f-row">
      <div class="left">密码</div>
      <div
        class="right set-pawd cp"
        @click="jump(1)"
      >
        修改密码
      </div>
    </div>
    <div class="item f-row">
      <div class="left">手机号</div>
      <div class="right f-row">
        <span>{{$store.state.login_info.mobile}}</span>
        <img
          @click="jump(2)"
          src="../../assets/images/others/icon.png"
          alt="修改"
          title="修改"
        />
      </div>
    </div>
    <div class="item f-row">
      <div class="left">QQ</div>
      <div class="right f-row">
        <span>24113168</span>
        <img
          src="../../assets/images/others/icon.png"
          alt="修改"
          title="修改"
        />
      </div>
    </div>
    <div class="item f-row">
      <div class="left">微信</div>
      <div class="right f-row">
        <span>未绑定</span>
        <img
          src="../../assets/images/others/icon.png"
          alt="修改"
          title="修改"
        />
      </div>
    </div>
    <div class="item f-row">
      <div class="left">微博</div>
      <div class="right f-row">
        <span>未绑定</span>
        <img
          src="../../assets/images/others/icon.png"
          alt="修改"
          title="修改"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods:{
    jump(e){
      switch(e){
        case 1://修改密码
          this.$router.push('/setNumInfo/1');
          break;
        case 2://修改手机号
          this.$router.push('/setNumInfo/2');
          break;
      }
    }
  }
}
</script>
<style lang="less" scoped>
.left {
  width: 6.25rem;
  margin-bottom: 3.125rem;
  color: #1f1f1f;
}
.set-pawd {
  color: var(--darkColor) !important;
}
.right {
  color: #676767;
  img {
    width: 0.875rem;
    height: 0.875rem;
    margin-left: 1.25rem;
    vertical-align: middle;
    cursor: pointer;
  }
}
</style>